<template>
	<div id="signin">
		<div class="top">
			<span class="count">我的砍币：{{points}}</span>
			<span class="ruleT" @click="rule">规则</span>
			<span class="rule" @click="goRecord">抽奖记录</span>
		</div>
		
		<div class="pan">
			<div class="back" :style="turn">
				<h1 class="one" :type="prizes[0]['type']"><span>¥</span>{{prizes[0]["value"]}}</h1>
				<h1 class="two" :type="prizes[1]['type']">{{prizes[1]["value"]}}</h1>
				<h1 class="three" :type="prizes[2]['type']"><span>¥</span> {{prizes[2]["value"]}}</h1>
				<h1 class="four" :type="prizes[3]['type']"><span>¥</span> {{prizes[3]["value"]}}</h1>
				<h1 class="five" :type="prizes[4]['type']">{{prizes[4]["value"]}}</h1>
			</div>
			<div class="ground"></div>
			<button class="click" @click="ran($event)"></button>
			<!-- <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/turntable_index.png" />
			<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/lottery_button.png" @click="ran()"  />
			<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/signin/turntable.png" :style="turn" />
			-->
		</div>
		
		<div class="per">
			20砍币抽一次
		</div>
		
		<div class="rule-wrap"  v-if="ruleshow" @click="rulehide">
			<div class="ruler">
				<p><span></span> 活动说明 <span></span></p>
				<p>参与抽奖即有机会获得IPhoneX。活动为概率中奖，奖品数量有限，祝您好运！</p>
				<p>惊喜一: iPhoneX手机一部</p>
				<p>惊喜二: 现金红包</p>
				<p>惊喜三: 3元，10元全场通用优惠券</p>
				<p>惊喜四: 50砍币</p>
				<p>声明: 实物类奖品将在活动结束5-10个工作日安排发货,会有客服联系您,请耐心等待</p>
				<button >知道了</button>
			</div>
		</div>
		<!-- ---------------------------遮罩层------------------------------- -->
		<div class="opaction" v-if="showOpac" @click="showOpacs">
			<img v-if="deleX" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/close_signin.png" style="position: absolute;top: 72%;left: 45%;width: .65rem;height: .65rem">
		</div>
		<!-- --------------------------  积分不足无法抽奖  ------------------------------- -->
		 <div class="textOpac" v-if="showText">
       	 	<p style="font-size:.32rem;color:#323232;padding: 20% 0;">砍币数量不足</P>
    	</div>
		<!-- ---------------------------抽中优惠券------------------------------ -->
		<div class="voucher" v-if="showcher" >
			<div class="allD">
				<ul class="left">
					<li class="money">¥<span>{{showcherContext.min_money}}</span></li>
					<li class="man">满{{showcherContext.max_money}}元可用</li>
				</ul>
				<ul class="right">
					<li class="tops">{{showcherContext.title}}</li>
					<li class="center">{{showcherContext.subTitle}}</li>
					<li class="bott">{{showcherContext.time}}</li>
				</ul>
			</div>
			<p>恭喜，抽中{{showcherContext.min_money}}元优惠券</P>
		</div>
		<!-- ---------------------------抽中红包------------------------------ -->
		<div class="redBag" v-if="redBag">
			<p class="ps">¥<span>{{redBagContext.value}}</span></P>
			<p class="supr">恭喜，获得{{redBagContext.value}}元红包</p>
			<p class="look">在我的-余额查看红包</p>
		</div>
		<!-- ---------------------------抽中砍币------------------------------ -->
		<div class="kanB" v-if="kanB" >
			<p class="tSuri">恭喜你！</p>
			<p class="text">抽中砍好货送你的砍币</P>
			<p class="how">{{kanBContext.value}}</p>
			<p class="whats">砍币</p>
		</div>
		<!-- ---------------------------谢谢参与------------------------------ -->
		<div class="thanks" v-if="thank">
			<p class="oh">很遗憾～</P>
			<p class="no">您与红包擦肩而过</P>
		</div>
	</div>
</template>

<script>
	import config from "../config/config.js";
	import share from "../share/share.js";
    import store from "../store/newStore.js";
    import MtaH5 from 'mta-h5-analysis';
	export default{
		data(){
			return{
				showText:false,       //积分不足
				ruleshow:false,      //活动规则
				showOpac:false,      //遮罩层
				showcher:false,		//抽中优惠券
				redBag:false,        //抽中红包
				kanB:false,			//抽中砍币
				thank:false,         //手臭没抽中
				turn:{},
				alertshow:false,
		        context:"",
		        height:0,
		        couponType:10,
                points:'',
                prizes:[],
                count:0,
                showcherContext:Object,
                redBagContext:Object,
                kanBContext:Object,
                deleX:false
			}
		},
        computed:{
            ticket(){
                return this.$store.state.getTicket;
            }
        },
		methods:{
		    ran($event){
				    var e=$event.currentTarget;
                    e.setAttribute('disabled','disabled');
                    var value=JSON.stringify({"token":localStorage.getItem('token')}),
                        key=demo(value);
                    axios.post('/Home/Integral/IntegralDraw',{
                        value:value,
                        key:key,
                        ticket:this.ticket
                    },config)
                        .then(function(response) {
                            if(response.data.code==200){
                                this.points=response.data.data.integral;
                                this.count++;
                                var angels=-response.data.data.angle;
                                var rounds=3600*this.count;
                                var _self=this;
                                this.turn = {
                                    transform: "rotate(" +(angels-rounds)+"deg)"
                                };
                                setTimeout(()=>{
                                    if(response.data.data.type==5){
                                        _self.thank=true;
                                        _self.showOpac=true;
                                        _self.deleX = true;
                                    }
                                    if(response.data.data.type==1){
                                        _self.showcher=true;
                                        _self.showcherContext=response.data.data.data;
                                        _self.showOpac=true;
                                        _self.deleX = true;
                                    }
                                    if(response.data.data.type==2){
                                        _self.redBag=true;
                                        _self.redBagContext=response.data.data.data;
                                        _self.showOpac=true;
                                        _self.deleX = true;
                                    }
                                    if(response.data.data.type==4){
                                        _self.kanB=true;
                                        _self.kanBContext=response.data.data.data;
                                        _self.showOpac=true;
                                        _self.deleX = true;
                                    }
                                    e.removeAttribute('disabled');
                                },5000)
                                this.$store.commit('increment',response.data.ticket);
                            }else{
                                this.showOpac=true;
                                this.showText=true;
                                this.deleX = true;
                                e.removeAttribute('disabled');
                            }
                        }.bind(this))
                        .catch(function (error) {
                            console.log(error);
                        });
            },
			rule(){
				this.ruleshow = true,
				this.showOpac = true,
				this.deleX = false
			},
			rulehide(){
				this.ruleshow = false,
				this.showOpac = false;
			},
			
			redhide(){
				this.redshow = false;
				this.codeshow = true;
			},
			codehide(){
				this.codeshow = false;
			},
			goRecord(){
				this.$router.push("/signRecord")	
			},
			showOpacs(){
				this.showOpac = false;
				this.ruleshow = false;
				this.showcher = false;
				this.redBag = false;
				this.thank = false;
				this.kanB = false;
				this.textOpac = false;
				this.showText=false;
                this.deleX = false;
			},
            ShowIntegralDraw(){
                var value=JSON.stringify({"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Integral/ShowIntegralDraw',{
                        value:value,
                        key:key,
					    ticket:this.ticket
                },config)
                    .then(function(response) {
                        var arr=[];
                        var arr1=[];
                        if(response.data.code==200){
                            this.points=response.data.data.myIntegral;
                            for(var i=0;i<response.data.data.drawList.length;i++){
                                if(i==4) continue;
                                arr.push(response.data.data.drawList[i])
                            }
                            arr1[0]=arr[1];
                            arr1[1]=arr[3];
                            arr1[2]=arr[0];
                            arr1[3]=arr[4];
                            arr1[4]=arr[2];
                            this.prizes=arr1;
                            this.$store.commit('increment',response.data.ticket);
                        }

                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });

			}
		},
		activated(){
		    share({})
		    this.points=this.$route.params.points;
			this.ShowIntegralDraw();
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
		}
	}
</script>

<style>
</style>